<template>
<!-- 2，先写子组件 -->
  <div>
      <h1>{{msg}}</h1>
      <h1>父组件传过来的值--------{{dataA}}</h1>
      <h1 v-if="msgA">事件调用</h1>
      <h1 @click="testB()">子--点我吧</h1>
  </div>
</template>

<script>
export default {
    name:'testB',
    props:{
        dataA:{//父组件传到子组件的参数，不能修改，只能使用, 当父组件传值后，子组件默认值将被覆盖
           type: String,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
              return "当前为子组件值"
            }
        },
    },
    data () {
    return {
      msg: '我是子组件',
      msgA:false,
    }
  },
  created(){
    console.log(this.$route.params)
       this.msgA=false
  },
  methods: {
    //   8，父组件调用子组件的方法
    //   testB(){
    //       this.msgA=!this.msgA
    //   }

    // 9,子组件调用父组件方法
    // 9，1在子组件的方法中，使用$emit声明一个函数 此函数为子组件定义，为暴露的API
    testB(){
           this.msgA=!this.msgA
          this.$emit('testBB',this.msgA,"子组件状态")
      }
    // 11,子组件直接调用父方法
    // testB(){
    //     this.$parent.testAA([this.msgA,"子组件状态"],'假的i')
    //   }
  }
}
</script>

<style scoped>

</style>
